<template>
	<view class="item-container">
		<image :src="movieData.img" class="img"></image>
		<view class="content">
			<view class="title">
				{{movieData.nm}}
			</view>
			<view class="viewer">
				<text style="font-size:26upx;">观众评</text>
				<text class="num">{{movieData.sc}}</text>
			</view>
			<view class="star">
				主演:{{movieData.star}}
			</view>
			<view class="play">
				{{movieData.showInfo}}
			</view>
			<block v-if="movieData.showst == 3">
				<wyb-button class="btn" :radius="radius" width="120rpx" height="60rpx" :color="movieData.color">购票</wyb-button>
			</block>
			
			<block v-if="movieData.showst == 4">
				<wyb-button class="btn" :radius="radius" width="120rpx" height="60rpx" :color="movieData.color">点映</wyb-button>
			</block>
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			movieData: {
				type: Object,
				default: {}
			}
		},
		data(){
			return{
				radius:['50px']
			}
		}
	}
</script>

<style lang="scss">
	.item-container {
		height: 200upx;
		display: flex;
		align-items: center;
		padding: 14upx 0 0upx 12upx;

		.img {
			width: 140upx;
			height: 200upx;
		}

		.content {
			height: 200upx;
			font-size: 26upx;
			flex: 1;
			margin-left:16upx;
			border-bottom: solid 1px #f6f6f6;
			position: relative;
			.title {
				font-size: 34upx;
				font-weight: 700;
			}

			.star {
				width: 430upx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.viewer {
				color: #666;
				margin-top: 14upx;
				.num {
					color: #faaf00;
					font-size: 32upx;
					font-weight: 700;
					margin-left: 10upx;
				}
			}
			.star,
			.play {
				color: #666;
				margin-top: 12upx;
			}
			.btn{
				top: 62upx;
				right:24upx;
				position: absolute;
			}
		}
	}
</style>
